<template>
  <div class="hor-layout">
    <el-card style="width: 100%">
      <div class="ver-layout">
        <el-tabs type="border-card" v-model="pageData.tabName">
          <el-tab-pane label="月考勤表格数据" name="月考勤表格数据">
            <monthCheckTableView :parentPageData="pageData" @uploadClick="uploadClick(true)"></monthCheckTableView>
          </el-tab-pane>
          <el-tab-pane label="月考勤图表数据" name="月考勤图表数据">
            <monthCheckCharts v-if="pageData.tabName=='月考勤图表数据'" :parentPageData="pageData"></monthCheckCharts>
          </el-tab-pane>
          <el-tab-pane label="月请假表格数据" name="月请假表格数据">
            <monthOffTableView :parentPageData="pageData"></monthOffTableView>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
  <!-- 上传弹窗 -->
  <el-dialog v-model="pageData.showUploadDialog" title="上传考勤表格" center size="small" width="40%">
    <div class="ver-layout-center" style="width: 80%;margin:auto;padding: 30px">
      <el-form :model="pageData.formData" inline size="small">
        <el-form-item label="考勤表所在sheet页序号" class="form-item-view">
          <el-input type="number" v-model="pageData.formData.sheetIndex"/>
        </el-form-item>
      </el-form>
      <el-upload
          ref="uploadRef"
          class="upload-demo"
          accept=".xlsx,.xls"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :auto-upload="true"
          :on-success="handleSuccess"
          :on-change="handleChange"
          :before-upload="beforeUpload"
      >
        <template #trigger>
          <el-button type="primary" size="small">上传考勤表</el-button>
        </template>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">

import type {UploadFile, UploadFiles} from "element-plus";
import {getDevMode, readExcelFile, showLoading} from "@/utils/utils.ts";
import {onMounted, reactive} from "vue";
import {demoData} from "@/utils/demo_data.ts";
import monthCheckCharts from "@/views/attendance/components/monthCheckCharts.vue";
import monthCheckTableView from "@/views/attendance/components/monthCheckTableView.vue";
import monthOffTableView from "@/views/attendance/components/monthOffTableView.vue";

const pageData = reactive({
  monthValue: '',
  tableHeader: [],
  tableData: [],
  loadingView: '',
  showUploadDialog: false,
  formData: {
    sheetIndex: 0
  },
  tabName: "月考勤表格数据"
})

//点击上传按钮
const uploadClick = () => {
  pageData.formData.sheetIndex = 0
  pageData.showUploadDialog = true;
}

const handleSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log("handleSuccess==", response, uploadFile, uploadFiles)
}
const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log("handleChange==", uploadFile, uploadFiles)
}

//初始化表格数据
const initTableData = (tableData) => {
  tableData.splice(0, 1);
  let tableHeader = tableData && tableData.length && tableData[0]
  pageData.monthValue = tableData[0]['月份']
  pageData.tableHeader = Object.keys(tableHeader).filter(header => !header.includes("_") && !header.includes("全路径机构"))
  pageData.tableData = tableData.map(tableItem => {
    Object.keys(tableItem).forEach((tableItemKey) => {
      tableItem[tableItemKey] = tableItem[tableItemKey].includes("/") ? tableItem[tableItemKey].split("/")[1] : tableItem[tableItemKey]
    })
    return tableItem
  })
}

//上传之前
const beforeUpload = async (file) => {
  console.log("beforeUpload==", file)
  pageData.loadingView = showLoading();
  let tableData = await readExcelFile(file, pageData.formData.sheetIndex)
  initTableData(JSON.parse(JSON.stringify(tableData)))
  pageData.loadingView.close()
  pageData.loadingView = null
  pageData.showUploadDialog = false;
  // console.log("pageData==", JSON.stringify(pageData))
}

//进入页面
onMounted(() => {
  if (getDevMode() == 'development') initTableData(demoData.tableData)
})
</script>

<style scoped>
.form-item-view {
  //width: 30%;
}

/deep/ .el-table th {
  background-color: #666 !important;
}

/* ---el-table滚动条公共样式--- */
/deep/ .el-scrollbar__bar.is-horizontal {
  height: 10px;
}

/deep/ .el-scrollbar__bar.is-vertical {
  width: 10px;
}

/deep/ .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
  background-color: #333333; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/deep/ .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
  background-color: #333333; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
</style>